/* ============================================================ SuperClass — Design Tokens v2.0 Todas las variables del sistema viven acá. Cambiás un valor acá y se actualiza en toda la marca. ============================================================ */ :root { /* ---------------------------------------------------------- 1. COLOR · Verde SuperClass (primario) El verde-teal de la marca. Es el sello de SuperClass. ---------------------------------------------------------- */ --teal-50: #ECFDF6; --teal-100: #D1FAE9; --teal-200: #A6F2D3; --teal-300: #6FE6B8; --teal-400: #3FD69E; /* MENTA · resaltado de marca ("secuencia", "aula") */ --teal-500: #15B98A; --teal-600: #079B72; /* íconos sobre blanco, success */ --teal-700: #0B826D; /* TEAL MARCA · base del degradé */ --teal-800: #0C6857; --teal-900: #0E5246; --teal-950: #032E26; /* ---------------------------------------------------------- 2. COLOR · Neutros fríos (slate) Grises para texto, bordes y fondos de trabajo. ---------------------------------------------------------- */ /* Rediseño 2026: neutros cálidos (stone) del set de mockups. Misma rampa de luminosidad, tinte cálido. Conservamos los nombres slate-*. */ --slate-50: #FAFAF9; --slate-100: #F5F4F2; --slate-200: #ECEBE8; /* border-hair */ --slate-300: #DAD8D3; --slate-400: #ADACA8; /* ink-faint */ --slate-500: #8A8983; --slate-600: #6F6E6A; /* ink-soft · cuerpo de texto sobre blanco */ --slate-700: #4B4A46; --slate-800: #2C2B28; --slate-900: #181816; /* ink · títulos */ --slate-950: #0C0C0B; /* Acentos mint del mockup (dos verdes con criterio distinto) */ --mint-deep: #0F4F44; /* oscuro · acentos sobre claro */ --mint-bright: #00B894; /* chillón · SOLO marco de bottom-nav + estados activos */ --mint-soft: #DCEAE6; /* fondos de badge/chip mint */ /* ---------------------------------------------------------- 3. COLOR · Crema (marketing cálido) Para portadas, web y piezas donde queremos calidez. ---------------------------------------------------------- */ --crema-50: #FFFDFB; --crema-100: #FFF8F5; /* fondo cálido base */ --crema-200: #FBEFE9; --crema-300: #F3DFD5; /* ---------------------------------------------------------- 4. COLOR · Semánticos (estados) Significados fijos. No usar para decorar. ---------------------------------------------------------- */ --status-success: #079B72; --status-success-bg: #ECFDF6; --status-warning: #E0A012; --status-warning-bg: #FEF6E7; --status-error: #D6453A; --status-error-bg: #FCEDEB; --status-info: #2F7DD1; --status-info-bg: #EAF2FB; /* ---------------------------------------------------------- 5. COLOR · Categorías de tareas docentes Cada categoría tiene su color en badges y agenda. ---------------------------------------------------------- */ --cat-planificar: #079B72; --cat-planificar-bg: #ECFDF6; --cat-planificar-text: #0B5E48; --cat-preparar: #E0A012; --cat-preparar-bg: #FEF6E7; --cat-preparar-text: #8A6206; --cat-corregir: #D6453A; --cat-corregir-bg: #FCEDEB; --cat-corregir-text: #A6332A; --cat-acordar: #7C5CE0; --cat-acordar-bg: #F1EEFB; --cat-acordar-text: #523A9E; --cat-reunion: #2F7DD1; --cat-reunion-bg: #EAF2FB; --cat-reunion-text: #225C9C; /* ---------------------------------------------------------- 6. VARIABLES SEMÁNTICAS (modo claro) La capa que usan los componentes. Apuntan a la paleta. ---------------------------------------------------------- */ --bg-base: #FAFAF9; /* Rediseño 2026: fondo cálido de trabajo (bg-soft) */ --bg-subtle: var(--slate-50); /* fondo de listas, zonas secundarias */ --bg-surface: #FFFFFF; /* superficie de tarjetas */ --bg-raised: #FFFFFF; /* superficies flotantes (modales, dropdowns) */ --bg-warm: var(--crema-100); /* fondo cálido para marketing */ --bg-brand: var(--teal-700); /* fondo de marca (portadas, hero) */ /* Degradés de marca (el "power" verde) */ --gradient-brand: linear-gradient(155deg, #0FA47E 0%, var(--teal-700) 45%, var(--teal-900) 100%); --gradient-brand-deep: linear-gradient(165deg, var(--teal-700) 0%, var(--teal-900) 70%, var(--teal-950) 100%); --gradient-mint: linear-gradient(135deg, var(--teal-400), var(--teal-600)); --gradient-sidebar: linear-gradient(185deg, var(--teal-700) 0%, var(--teal-800) 55%, var(--teal-900) 100%); --glow-mint: radial-gradient(circle at 80% 12%, rgba(63,214,158,.35), transparent 58%); /* Degradé IA (Design System 2.0 — el "brillo" generativo) */ --ai-mint: #51DDA8; --ai-aqua: #34CFCB; --gradient-ai: linear-gradient(120deg, #6BEFC0 0%, #3FD69E 50%, #2FCAC6 100%); --gradient-ai-soft: linear-gradient(120deg, #DFFBF0, #CFF6EE); --glow-ai: radial-gradient(circle at 30% 20%, rgba(81,221,168,.45), transparent 60%); /* Degradé IA — mint claro → aqua. RESERVADO para todo lo que es inteligencia artificial. */ --ai-mint: #51DDA8; --ai-aqua: #34CFCB; --gradient-ai: linear-gradient(120deg, #6BEFC0 0%, #3FD69E 50%, #2FCAC6 100%); --gradient-ai-soft: linear-gradient(120deg, #DFFBF0, #CFF6EE); --glow-ai: radial-gradient(circle at 30% 20%, rgba(81,221,168,.45), transparent 60%); --text-primary: var(--slate-900); --text-secondary: var(--slate-600); --text-tertiary: var(--slate-500); --text-disabled: var(--slate-400); --text-inverse: #FFFFFF; --text-on-accent: #FFFFFF; --text-brand: var(--teal-700); --border-subtle: var(--slate-100); --border-default: var(--slate-200); --border-strong: var(--slate-300); --accent-primary: var(--teal-700); --accent-primary-hover: var(--teal-800); --accent-primary-active: var(--teal-900); --accent-secondary: var(--teal-400); /* menta, para resaltados */ /* ---------------------------------------------------------- 7. TIPOGRAFÍA ---------------------------------------------------------- */ /* Rediseño 2026: Inter como familia única (títulos y cuerpo), igual que los mockups. */ --font-display: "Inter", -apple-system, system-ui, sans-serif; --font-body: "Inter", -apple-system, system-ui, sans-serif; --text-xs: 12px; --lh-xs: 1.45; --text-sm: 14px; --lh-sm: 1.5; --text-base: 16px; --lh-base: 1.6; --text-lg: 18px; --lh-lg: 1.55; --text-xl: 22px; --lh-xl: 1.4; --text-2xl: 28px; --lh-2xl: 1.25; --text-3xl: 36px; --lh-3xl: 1.15; --text-4xl: 48px; --lh-4xl: 1.05; --text-5xl: 64px; --lh-5xl: 1.0; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; /* ---------------------------------------------------------- 8. ESPACIADO (múltiplos de 4px) ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------------------------------------------------------- 9. BORDES Y RADIOS ---------------------------------------------------------- */ /* Rediseño 2026: geometría más redondeada del set de mockups. */ --radius-sm: 10px; /* inputs chicos, tags */ --radius-md: 14px; /* botones, cards chicas */ --radius-lg: 20px; /* cards principales (mockup: 26 en grandes) */ --radius-xl: 26px; /* contenedores grandes */ --radius-2xl: 32px; /* portadas, modales, bottom sheets */ --radius-full: 999px; /* avatares, pills, badges redondos */ --border-width-default: 1px; --border-width-strong: 2px; /* ---------------------------------------------------------- 10. SOMBRAS (undertone teal cálido) ---------------------------------------------------------- */ /* Rediseño 2026: sombras suaves con undertone neutro cálido (shadow-soft / shadow-lift). */ --shadow-xs: 0 1px 2px rgba(24,24,22,0.04); --shadow-sm: 0 1px 2px rgba(24,24,22,0.04), 0 12px 24px -12px rgba(24,24,22,0.08); --shadow-md: 0 2px 4px rgba(24,24,22,0.05), 0 24px 48px -20px rgba(24,24,22,0.14); --shadow-lg: 0 8px 30px -8px rgba(24,24,22,0.18), 0 2px 8px rgba(24,24,22,0.06); --shadow-xl: 0 -8px 40px -8px rgba(24,24,22,0.25); /* Foco accesible */ --focus-ring: 0 0 0 3px rgba(0,184,148,.30); }